﻿<!DOCTYPE html>
<html ng-app="papercutApp" ng-cloak>
  <head>
    <title>Papercut SMTP</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="referrer" content="no-referrer" />

    <link rel="icon" type="image/png" href="images/papercut.ico" />

    <link rel="stylesheet" href="css/jquery-ui-1.10.4-smoothness.css" />
    <link rel="stylesheet" href="css/bootstrap-3.3.2.min.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body ng-controller="MailCtrl" ng-click="keepopen=false">
    <nav class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container-fluid">
        <div class="col-md-2 col-sm-3">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">
              <img
                src="images/papercut-logo.png"
                height="20"
                alt="Papercut SMTP"
              />
            </a>
          </div>
        </div>

        <div class="col-md-10 col-sm-9">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a
                target="_blank"
                href="https://github.com/ChangemakerStudios/Papercut-SMTP"
              >
                <img src="images/github.png" height="16" alt="GitHub" /> GitHub
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-md-2 col-sm-3">
          <ul class="nav nav-pills nav-stacked">
            <li class="inbox">
              <a href="#" ng-click="backToInboxFirst()">
                Inbox ({{totalMessages}})
              </a>
              <a
                title="Delete all messages"
                href="#"
                class="btn-delete-all glyphicon glyphicon-trash"
                ng-click="deleteAll()"
              ></a>
            </li>
          </ul>
        </div>

        <div class="col-md-10 col-sm-9 content">
          <div class="toolbar" ng-if="!preview">
            <button
              class="btn btn-default"
              ng-click="refresh()"
              title="Refresh"
            >
              <i class="glyphicon glyphicon-refresh"></i>
            </button>

            <span class="pull-right">
              <span class="message-count" ng-if="(totalMessages || 0) != 0" ng-cloak>
                <select
                  ng-model="itemsPerPage"
                  ng-change="showUpdated(itemsPerPage)"
                >
                  <option value="10">10</option>
                  <option value="25">25</option>
                  <option value="50">50</option>
                  <option value="75">75</option>
                  <option value="100">100</option>
                </select>
                <strong
                  >{{ startMessages + 1 }}-{{ startMessages + countMessages
                  }}</strong
                >
                of
                <strong>{{ totalMessages }}</strong>
              </span>

              <button
                class="btn btn-default"
                ng-click="showNewer()"
                title="Newer"
                ng-class="{'disabled':startMessages<=0}"
              >
                <i class="glyphicon glyphicon-chevron-left"></i>
              </button>

              <button
                class="btn btn-default"
                ng-click="showOlder()"
                title="Older"
                ng-class="{'disabled':startMessages+countMessages>=totalMessages}"
              >
                <i class="glyphicon glyphicon-chevron-right"></i>
              </button>
            </span>
          </div>

          <div class="messages container-fluid" ng-if="!preview">
            <div
              class="msglist-message row"
              ng-repeat="message in messages"
              ng-click="selectMessage(message)"
            >
              <div class="col-md-5 col-sm-5">
                <span class="subject unread">{{ message.Subject }}</span>
              </div>
              <div class="col-md-4 col-sm-3">
                <div class="row">
                  <div class="col-md-9 col-sm-12 text-right">
                    {{ getMoment(message.CreatedAt).fromNow() }}
                  </div>
                  <div class="col-md-3 col-sm-12 text-right">
                    {{ message.Size }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="toolbar" ng-if="preview">
            <button
              class="btn btn-default"
              ng-click="backToInbox()"
              title="Back to Inbox"
            >
              <i class="glyphicon glyphicon-arrow-left"></i>
            </button>

            <button
            class="btn btn-default"
            ng-click="deleteMessage(preview)"
            title="Delete Message"
          >
            <i class="glyphicon glyphicon-trash"></i>
          </button>
          </div>

          <div class="preview" ng-if="preview">
            <div class="row headers">
              <div class="col-md-10">
                <table>
                  <tbody>
                    <tr>
                      <td class="header-name">From</td>
                      <td>
                        <span ng-if="!!preview.From[0].Name"
                          >{{preview.From[0].Name}}(</span
                        >{{ preview.From[0].Address }}<span
                          ng-if="!!preview.From[0].Name"
                          >)</span
                        >
                      </td>
                    </tr>
                    <tr>
                      <td class="header-name">To</td>
                      <td>
                        <label
                          class="mail-address"
                          ng-repeat="to in preview.To"
                        >
                          <span ng-if="!!to.Name">{{to.Name}}(</span>{{
                          to.Address }}<span ng-if="!!to.Name">)</span>
                        </label>
                      </td>
                    </tr>
                    <tr ng-if="!!(preview.Cc && preview.Cc.length)">
                      <td class="header-name">CC</td>
                      <td>
                        <label class="mail-address" ng-repeat="c in preview.Cc">
                          <span ng-if="!!c.Name">{{c.Name}}(</span> {{ c.Address
                          }}<span ng-if="!!c.Name">)</span>
                        </label>
                      </td>
                    </tr>
                    <tr ng-if="!!(preview.BCc && preview.BCc.length)">
                      <td class="header-name">BCC</td>
                      <td>
                        <label
                          class="mail-address"
                          ng-repeat="b in preview.BCc"
                        >
                          <span ng-if="!!b.Name">{{b.Name}}(</span> {{ b.Address
                          }}<span ng-if="!!b.Name">)</span>
                        </label>
                      </td>
                    </tr>
                    <tr ng-if="!!preview.Date">
                      <td class="header-name">Date</td>
                      <td>
                        {{preview.Date}}
                      </td>
                    </tr>
                    <tr>
                      <td class="header-name">Subject</td>
                      <td><strong>{{ preview.Subject }}</strong></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="mail-content">
              <span class="download-raw pull-right">
                <a ng-href="api/messages/{{preview.Id}}/raw" target="_blank"
                  ><span class="glyphicon glyphicon-cloud-download"></span>
                  Download raw message</a
                >
              </span>
              <ul class="nav nav-tabs">
                <li
                  ng-if="hasHTML(preview)"
                  ng-class="{ active: hasHTML(preview) }"
                >
                  <a href="#preview-html" data-toggle="tab">HTML</a>
                </li>
                <li
                  ng-if="hasText(preview)"
                  ng-class="{ active: !hasHTML(preview) }"
                >
                  <a href="#preview-plain" data-toggle="tab">Plain text</a>
                </li>
                <li>
                  <a href="#preview-headers" data-toggle="tab">Headers</a>
                </li>
                <li>
                  <a href="#preview-sections" data-toggle="tab">Sections</a>
                </li>
              </ul>

              <div class="tab-content">
                <iframe
                  target-blank=""
                  ng-if="hasHTML(preview)"
                  ng-class="{ active: hasHTML(preview) }"
                  class="tab-pane"
                  id="preview-html"
                  body-html="preview.previewHTML"
                  content-link-message-id="preview.Id"
                  seamless
                  frameborder="0"
                  style="width: 100%;"
                ></iframe>
                <div
                  class="tab-pane"
                  ng-class="{ active: !hasHTML(preview) }"
                  id="preview-plain"
                  ng-bind-html="formatMessagePlain(preview)"
                ></div>
                <div class="tab-pane" id="preview-headers">
                  <ul>
                    <li ng-repeat="header in preview.Headers">
                      <span class="header-name">{{header.Name}}</span>:
                      {{header.Value}}
                    </li>
                  </ul>
                </div>
                <div class="tab-pane" id="preview-sections">
                  <table>
                    <thead>
                      <th>MEDIA TYPE</th>
                      <th>FILENAME</th>
                      <th>SAVE</th>
                    </thead>
                    <tbody>
                      <tr ng-repeat="section in preview.Sections">
                        <td>{{section.MediaType}}</td>
                        <td>{{section.FileName}}</td>
                        <td>
                          <a
                            title="Download and save section content"
                            ng-href="api/messages/{{preview.Id}}/sections/{{$index}}"
                            target="_blank"
                            class="glyphicon glyphicon-download-alt"
                          ></a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery-ui-1.10.4.min.js"></script>
    <script src="js/bootstrap-3.3.2.min.js"></script>
    <script src="js/angular-1.3.8.js"></script>
    <script src="js/moment-2.8.4.js"></script>
    <script src="js/controllers.js"></script>
  </body>
</html>
